<script setup lang='ts'>
import { computed, ref,onMounted } from 'vue'
import { NTag,NSelect,NDatePicker,NFormItem,NInput,NModal, NTabPane, NTabs,useMessage,NTable,NPagination,NForm,NButton } from 'naive-ui'
import { SvgIcon } from '@/components/common'
import { t } from '@/locales';
import {getPromptRecordList} from '@/api/record'
import {PromptRecord, PromptRecordResult, PromptRecordPage, PromptRecordReq, CouponDeleteReq} from '@/typings/record'
import {serviceTypeOptions} from '@/api/ServiceTypeConstant'

interface Props {
  visible: boolean
}

interface Emit {
  (e: 'update:visible', visible: boolean): void
}
const props = defineProps<Props>()

const emit = defineEmits<Emit>()

const show = computed({
  get() {
    return props.visible
  },
  set(visible: boolean) {
    emit('update:visible', visible)
  },
})

const page = ref(1)
const pageSize = ref(20)
const total = ref(0)
const formValue = ref<PromptRecordReq>(Object.create(null))
const data = ref<PromptRecordPage>(Object.create(null))
const dataVo = ref<PromptRecordResult>(Object.create(null))
// const formValue = ref<CouponDeleteReq>(Object.create(null))

async function search() {
    formValue.value.page = page.value
		formValue.value.pageSize = pageSize.value
    if(formValue.value.range ){
        if(formValue.value.range.length>1)
        formValue.value.startTime = new Date(formValue.value.range[0])
        formValue.value.endTime = new Date(formValue.value.range[1])
		}
    dataVo.value = await getPromptRecordList(formValue.value)
    data.value = dataVo.value.page
    getTitle()
}

const title = ref<String>()

function getTitle() {
    title.value = "总消耗额度："+dataVo.value.allCost+"$"
}

function changePage(newPage:number) {
		page.value = newPage
		search()
}

</script>

<template>
<!--  <NModal v-model:show="show" :title="title" style="width: 100%; max-width: 900px;" preset="card">-->
		<n-form
			inline
			:model="formValue"
			:size="'medium'">
			<n-form-item label="模型"  >
				<NSelect
					style="width: 170px"
					v-model:value="formValue.serviceType"
					:key="formValue.serviceType"
					:options="serviceTypeOptions"
				/>
			</n-form-item>
			<n-form-item label="时间范围" >
				<n-date-picker v-model:value="formValue.range" type="datetimerange" clearable />
			</n-form-item>
			<n-form-item>
				<n-button attr-type="button" @click="search">
					搜索
				</n-button>
			</n-form-item>
		</n-form>


		<div style="width: 100%;height: 500px;overflow: auto;">
			<n-table :single-line="false" >
				<thead>
				<tr>
					<th>创建时间</th>
<!--					<th>令牌</th>-->
					<th>类型</th>
					<th>模型</th>
					<th>提示</th>
					<th>补全</th>
					<th>消费额度</th>
				</tr>
				</thead>
				<tbody>
				<tr v-for="record in data.records">
					<td>{{record.createTime}}</td>
<!--					<td>{{record.token}}</td>-->
					<td>
						<n-tag >
						消费
						</n-tag>
					</td>
					<td>
						<n-tag type="success">
							{{record.serviceType}}
						</n-tag>
					</td>
					<td>{{record.promptToken}}</td>
					<td>{{record.relyToken}}</td>
					<td>{{record.cost}}$</td>
				</tr>
				</tbody>
			</n-table>
		</div>
	  <br>
		<div style="display: flex;
								justify-content: center;
								align-items: center;">
			<H2>{{title}}</H2>&nbsp;
			<n-pagination
				v-model:page="page"
				v-model:page-size="pageSize"
				:item-count="data.total"
				@update:page="changePage"
				show-size-picker
				:page-sizes="[10, 20, 30, 40]"
			>
				<template #suffix="{ itemCount }">
					共 {{ data.total }} 项
				</template>
			</n-pagination>
		</div>
<!--  </NModal>-->
</template>
